<template>
    <el-dialog :show-close="showClose" :draggable="draggable" :model-value="show" :close-on-click-modal="false"
        class="cust-dialog" :top="top + 'px'" :width="width" @close="close">
        <template #header="{ close, titleId, titleClass }">
            <div v-if="title" class="title">{{ title }}</div>
            <slot v-else name="header"></slot>
        </template>
        <div class="dialog-body" :style="{ 'max-height': maxHeight + 'px', padding: padding + 'px' }">
            <slot></slot>
        </div>
        <template v-if="buttons && buttons.length > 0 || showCancel">
            <div class="dialog-footer">
                <el-button link @click="close" v-if="showCancel">取消</el-button>
                <el-button v-for="btn in buttons" :key="index" :type="btn.type || 'primary'" @click="btn.click">
                    {{ btn.text }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    showClose: {
        type: Boolean,
        default: true
    },
    draggable: {
        type: Boolean,
        default: false
    },
    top: {
        type: Number,
        default: 20
    },
    width: {
        type: String,
        default: '30%'
    },
    buttons: {
        type: Array,
    },
    padding: {
        type: Number,
        default: 15
    },
    title: {
        type: String,
        default: ''
    },
    showCancel: {
        type: Boolean,
        default: false
    },
})
const maxHeight = window.innerHeight - props.top - 120
const emit = defineEmits()
const close = () => {
    emit('update:show', false)
}
onMounted(() => {
    console.log(maxHeight);
    
})

</script>

<style scoped lang="scss">
.cust-dialog {
    padding: 0px !important;
    margin-bottom: 5px !important;

    .el-dialog__header {
        padding: 16px;

    }

    .title {
        font-size: 20px;
    }

    .dialog-footer {
        border-top: 1px solid #ddd;
        text-align: right;
        padding: 5px 20px;
    }
}
</style>